<!--
 * @description:
 * @fileName: userEdit
 * @author: xsz
 * @date: 2022/11/11-14:47
 * @version: V1.0.0
-->
<template>
  <!-- 添加或修改用户对话框 -->
  <cs-dialog
    :dialog="dialogOption"
    @onSubmit="handleSaveUser"
  >
    <div slot="content">
      <el-form ref="saveUserFormInline" :model="saveUserFormInline" :rules="saveUserRules" size="small" label-width="100px" style="margin-right: 10px">
        <el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户姓名" prop="name">
                <el-input v-model="saveUserFormInline.name" placeholder="请输入用户姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录用户名" prop="userName">
                <el-input v-model="saveUserFormInline.userName" placeholder="请输入登录用户名" />
              </el-form-item>
            </el-col>
            <!--          <el-col :span="12">-->
            <!--            <el-form-item label="身份证号" prop="cardId">-->
            <!--              <el-input v-model="saveUserFormInline.cardId" placeholder="请输入身份证号" />-->
            <!--            </el-form-item>-->
            <!--          </el-col>-->
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="saveUserFormInline.phone" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
            <!--          <el-col :span="12">-->
            <!--            <el-form-item label="用户邮箱">-->
            <!--              <el-input v-model="saveUserFormInline.mail" placeholder="请输入用户邮箱" />-->
            <!--            </el-form-item>-->
            <!--          </el-col>-->
            <el-col :span="12">
              <el-form-item label="用户性别" prop="gender">
                <el-select
                  v-model="saveUserFormInline.gender"
                  filterable
                  class="size-full"
                  clearable
                >
                  <el-option label="男" value="1" />
                  <el-option label="女" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色名称" prop="roleId">
                <el-select
                  v-model="saveUserFormInline.roleId"
                  filterable
                  clearable
                  class="size-full"
                  placeholder="请选择要分配的角色名称"
                >
                  <el-option
                    v-for="option in rolesOption"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
<!--            <el-col v-if="saveUserFormInline.roleId === 2" :span="12">-->
<!--              <el-form-item label="培训组" prop="groupId">-->
<!--                <el-select-->
<!--                  v-model="saveUserFormInline.groupId"-->
<!--                  filterable-->
<!--                  class="size-full"-->
<!--                  clearable-->
<!--                >-->
<!--                  <el-option-->
<!--                    v-for="item in groupOptions"-->
<!--                    :key="item.code"-->
<!--                    :label="item['name']"-->
<!--                    :value="item.id.toString()"-->
<!--                  />-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="24">-->
<!--              <el-form-item label="用户头像" prop="avatar">-->
<!--                <el-upload-->
<!--                  drag-->
<!--                  :action="uploadOption.action"-->
<!--                  :show-file-list="false"-->
<!--                  accept=".png,.jpg,.gif,.jpeg"-->
<!--                  :on-success="onSuccess"-->
<!--                >-->
<!--                  <el-image-->
<!--                    v-if="saveUserFormInline.avatar"-->
<!--                    :src="`${uploadOption.downloadUrl}${saveUserFormInline.avatar}`"-->
<!--                    fit="contain"-->
<!--                    class="cover-image"-->
<!--                  />-->
<!--                  <template v-else>-->
<!--                    <i class="el-icon-upload" style="font-size: 50px" />-->
<!--                    <div class="el-upload__text" style="font-size: 12px">将文件拖到此处，或<em>点击上传</em></div>-->
<!--                  </template>-->
<!--                  <div slot="tip" class="el-upload__tip">建议尺寸：540*540px 或 1: 1，请上传jpg/jpeg/png/gif格式</div>-->
<!--                </el-upload>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="24">
              <div v-if="dialogOption.title.title === '新增'" style="padding-left: 23px">
                <p>新增用户默认密码：fy@手机号后六位</p>
              </div>
            </el-col>
          </el-row>
        </el-row></el-form>
    </div>
    <div slot="footer" />
  </cs-dialog>
</template>

<script>
import { validPhone } from '@/utils/validate'
import { saveManager } from '@/api/userFile'
// import { getGroupList } from '@/api/system/group'
import { baseURL } from '@/config/net.config'
import { commonDownloadFile, commonUploadFile } from '@/api/config/uploadApi'

export default {
  name: 'UserEdit',
  data() {
    return {
      dialogOption: {
        show: false,
        width: '50%',
        // height: 400,
        title: {
          title: '新增',
          icon: ''
        }
      },
      uploadOption: {
        action: `${baseURL}${commonUploadFile}`,
        downloadUrl: `${baseURL}${commonDownloadFile}`,
        headers: {
          'Auth-Token': localStorage.getItem('MyToken')
        }
      },
      rolesOption: [],
      // 酒店数据
      groupOptions: [],
      saveUserFormInline: {},
      saveUserRules: {
        roleId: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }],
        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
        companyName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
        // cardId: [
        //   { required: false, message: '身份证号不能为空', trigger: 'blur' },
        //   { validator: validIdCard, trigger: 'blur' }
        // ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          // 这个只能验证手机号
          { validator: validPhone, trigger: 'blur' }
        ],
        // mail: [
        //   { required: true, message: '用户邮箱不能为空', trigger: 'blur' },
        //   { validator: isEmail, trigger: 'blur' }
        // ],
        // gender: [{ required: true, message: '用户性别不能为空', trigger: 'blur' }],
        groupId: [{ required: true, message: '培训组不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted() {
  },
  methods: {
    showEdit(row) {
      if (row) {
        this.dialogOption.title.title = '修改'
        this.saveUserFormInline = Object.assign({}, row)
      } else {
        this.dialogOption.title.title = '新增'
        this.saveUserFormInline = {}
      }
      this.dialogOption.show = true
      // this.queryGroupList()
    },
    // 用户头像上传成功
    onSuccess(res) {
      if (res) {
        this.$set(this.saveUserFormInline, 'avatar', res.id)
      }
    },
    // // 查询培训组列表
    // queryGroupList() {
    //   getGroupList(1, -1, {}).then((res) => {
    //     this.groupOptions = res.data.result
    //   })
    // },
    handleSaveUser(callback) {
      this.$refs['saveUserFormInline'].validate(valid => {
        if (valid) {
          this.saveUserFormInline.status = '2'
          saveManager(this.saveUserFormInline).then(() => {
            this.$message.success('保存成功！')
            callback(true)
            this.$emit('getData')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cover-image {
  width: 180px;
  height: 180px;
}
::v-deep {
  .el-upload-dragger {
    width: 180px;
    height: 180px;
  }
}
</style>
